import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import indexApi from '../apis/index'
import TestApi from '../apis/test'
import Logo from '../assets/images/index/logo.png'
import Banner from '../assets/images/index/banner.png'
import Bg from '../assets/images/index/bg.png'
import Text1 from '../assets/images/index/text1.png'
import Img1 from '../assets/images/index/img-1.png'
import Shuju from '../assets/images/index/数据.png'
import Text2 from '../assets/images/index/text2.png'
import Img2 from '../assets/images/index/img-2.png'
import User from '../assets/images/index/user.png'
import User2 from '../assets/images/index/user2.png'
import { Button, Modal, Dropdown, Space, Form, Input, Radio, Select, message } from 'antd';
export default function index() {
    if (!localStorage.token) {
        window.location.hash = '#/login'
        window.location.reload()
    }
    const [type, setTypes] = useState([])
    const [rank,setRank] = useState([])
    useEffect(() => {
        indexApi.getUserInfo().then(res => {
            setUserInfo(res.data.data)
        })
        getAllType()
        getAllRank()
    }, [])
    function getAllType(){
        indexApi.getTypes().then(res => {
            setTypes(res.data.data)
        })
    }
    function getAllRank(){
        TestApi.getTests().then(res =>{
            setRank(res.data.data)
        })
    }

    //公告弹窗模态框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    //个人信息模态框
    const [isModalOpenProfile, setIsModalOpenProfile] = useState(false);
    const showModalProfile = () => {
        setIsModalOpenProfile(true);
        form.setFieldsValue({
            phone: userInfo.phone,
            name: '李四',
            gender: 1,
            dept: '信息中心'
        })
    };
    const handleOkProfile = () => {
        setIsModalOpen(false);
    };
    const handleCancelProfile = () => {
        setIsModalOpenProfile(false);
    };

    //修改个人资料功能
    const [userInfo, setUserInfo] = useState({})
    const [form] = Form.useForm()
    const onFinish = (values) => {
        console.log('Success:', values);
        const params = {
            _id: userInfo._id,
            phone: values.phone,
            name: values.name,
            gender: values.gender
        }
        indexApi.updateStu(params).then(res => {
            console.log(res);
            if (res.data.code == 1) {
                message.success(res.data.msg)
                handleOkProfile()
            }
        })
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    //修改个人信息性别
    const [value, setValue] = useState(1);
    const onChange = (e) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };

    //排行榜模态框
    const [isModalOpenRank, setIsModalOpenRank] = useState(false);
    const showModalRank = () => {
        setIsModalOpenRank(true);
    };
    const handleOkRank = () => {
        setIsModalOpenRank(false);
    };
    const handleCancelRank = () => {
        setIsModalOpenRank(false);
    };

    //头像下拉框
    const items = [
        {
            key: '1',
            label: '修改资料',
        },
        {
            key: '2',
            label: '排行榜',
        },
        {
            key: '3',
            label: '退出登录',
        },
    ];
    const menuProps = {
        items,
        onClick: user,
    };
    const navigate = useNavigate()
    function user(e) {
        if (e.key === '3') {
            localStorage.clear()
            navigate('/login')
        }
        if (e.key === '2') {
            showModalRank()
        }
        if (e.key === '1') {
            showModalProfile()
        }
    }

    //跳转页面
    function toTest() {
        navigate('/test')
    }
    function toError(){
        navigate('/error')
    }
    function toCollection(){
        navigate('/collection')
    }
    function Test(){
        navigate('/test')
    }
    return (
        <div>
            <div className='toubu'>
                <img src={Logo} alt="" style={{ marginLeft: 360 }} />
                <div style={{ width: 320, display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', marginRight: 300 }} className='toubuwz'>
                    <span className='indexbg'>首页</span>
                    <span onClick={toTest}>考试</span>
                    <span onClick={toError}>错题本</span>
                    <span onClick={toCollection}>收藏夹</span>
                </div>
                <div>
                    <Dropdown menu={menuProps}>
                        <a onClick={(e) => e.preventDefault()}>
                            <Space>
                                <img src={User} alt="" />
                            </Space>
                        </a>
                    </Dropdown>
                    <span style={{ marginRight: 382 }} className='toubuwz'>李四</span>
                </div>
            </div>
            <div>
                <img src={Banner} alt="" />
            </div>
            <div className='icon'>
                <div style={{display:'flex'}}>
                    {
                        type.map(item =>{
                            return <div key={item._id} className='iconBox' onClick={Test}>
                                <div style={{width:'100%',marginTop:20}}><img src={item.icon} alt="" style={{width:120,height:120}} /></div>
                                <div style={{fontSize:22,color:'#666666',textAlign:'center',width:'100%'}}>{item.type}</div>
                            </div>
                        })
                    }
                </div>
            </div>
            <div className='centerBox'>
                <div style={{ textAlign: 'center' }}>
                    <img src={Text1} alt="" />
                </div>
                <div style={{ display: 'flex' }}>
                    <div style={{ marginTop: 50 }}>
                        <img src={Img1} alt="" />
                    </div>
                    <div style={{ marginTop: 100, marginLeft: 150, fontSize: 20, color: '#666666' }}>
                        <div style={{ marginBottom: 20 }}>
                            <span>适用于高校考试、认证考试、招聘考试等严格防作弊场景</span>
                        </div>
                        <div style={{ marginBottom: 20 }}>
                            <span>学员考前调试设备，本地备份答案及云端同步，断电断网续考</span>
                        </div>
                        <div style={{ marginBottom: 20 }}>
                            <span>人脸识别与权威数据库比对，AI监考中心三路音视频实时监考</span>
                        </div>
                        <div style={{ marginBottom: 20 }}>
                            <span>支持匿名判卷及分题分学员判卷，避免判卷过程的舞弊行为</span>
                        </div>
                        <button style={{ width: 150, height: 50, backgroundColor: '#726fff', color: '#fff', border: 'none', fontSize: 18, marginLeft: 340, marginTop: 20 }}>探索更多</button>
                    </div>
                </div>
            </div>
            <div>
                <img src={Bg} alt="" />
                <div className='shujuTitle'>
                    <img src={Shuju} alt="" />
                </div>
                <div className='shujuBox'>
                    <div className='outBox'>
                        <div className='center'>
                            <div className='outcircle1'></div>
                            <div style={{
                                width: 160, height: 160, backgroundColor: '#726fff',
                                borderRadius: '50%', display: 'flex', justifyContent: 'center',
                                alignItems: 'center', fontSize: 30, color: '#fff', marginTop: '-180px', marginLeft: 20
                            }}>186 <span style={{ fontSize: 18 }}>道</span>
                            </div>
                            <div className='text'>
                                练习题数
                            </div>
                        </div>
                    </div>
                    <div className='outBox'>
                        <div className='center'>
                            <div className='outcircle2'></div>
                            <div style={{
                                width: 160, height: 160, backgroundColor: '#eb66ab',
                                borderRadius: '50%', display: 'flex', justifyContent: 'center',
                                alignItems: 'center', fontSize: 30, color: '#fff', marginTop: '-180px', marginLeft: 20
                            }}>5 <span style={{ fontSize: 18 }}>天</span>
                            </div>
                            <div className='text'>
                                学习天数
                            </div>
                        </div>
                    </div>
                    <div className='outBox'>
                        <div className='center'>
                            <div className='outcircle3'></div>
                            <div style={{
                                width: 160, height: 160, backgroundColor: '#ab66eb',
                                borderRadius: '50%', display: 'flex', justifyContent: 'center',
                                alignItems: 'center', fontSize: 30, color: '#fff', marginTop: '-180px', marginLeft: 20
                            }}>66 <span style={{ fontSize: 18 }}>分</span>
                            </div>
                            <div className='text'>
                                最近考试
                            </div>
                        </div>
                    </div>
                    <div className='outBox'>
                        <div className='center'>
                            <div className='outcircle4'></div>
                            <div style={{
                                width: 160, height: 160, backgroundColor: '#e366eb',
                                borderRadius: '50%', display: 'flex', justifyContent: 'center',
                                alignItems: 'center', fontSize: 30, color: '#fff', marginTop: '-180px', marginLeft: 20
                            }}>74 <span style={{ fontSize: 18 }}>分</span>
                            </div>
                            <div className='text'>
                                平均分数
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div className='kaoshititle'>
                    <img src={Text2} alt="" />
                </div>
                <div className='kaoshiBox'>
                    <div>
                        <img src={Img2} alt="" />
                    </div>
                    <div style={{ marginLeft: 40 }}>
                        <div style={{ marginTop: 18 }} onClick={showModal}>
                            <button style={{ backgroundColor: '#726fff', border: 'none', color: '#fff', borderRadius: 14 }}>全部</button>
                            <button className='kaoshoborder'>最近</button>
                            <button className='kaoshoborder'>一个月前</button>
                        </div>
                        <div style={{ marginTop: 18 }}>
                            <div style={{ fontSize: 19, color: '#373737', marginBottom: 10 }}>2022年安徽公务员考试公告</div>
                            <div style={{ width: 550, fontSize: 16, color: '#666666' }}>
                                关于推迟安徽省2022年度考试录用公务员和选调生笔试工作的公告 为认真贯彻落实安徽省新冠肺炎疫情防控部署要求,切实做好疫情防控工作,保障广大...
                            </div>
                            <div style={{ width: 560, height: 2, backgroundColor: '#bdbdbd', marginTop: 16 }}></div>
                        </div>
                        <div style={{ marginTop: 18 }}>
                            <div style={{ fontSize: 19, color: '#373737', marginBottom: 10 }}>关于2022年我省高职单招考试推迟举行的公告</div>
                            <div style={{ width: 550, fontSize: 16, color: '#666666' }}>
                                关于2022年我省高职单招考试推迟举行的公告 鉴于当前我省新冠肺炎疫情防控形势，为保障广大考生身体健康和生命安全，经研究，原定于4月9日...
                            </div>
                            <div style={{ width: 560, height: 2, backgroundColor: '#bdbdbd', marginTop: 16 }}></div>
                        </div>
                        <div style={{ marginTop: 18 }}>
                            <div style={{ fontSize: 19, color: '#373737', marginBottom: 10 }}>教师资格证考试公告_中小学教师资格证考试资讯</div>
                            <div style={{ width: 550, fontSize: 16, color: '#666666' }}>
                                中小学和幼儿园教师资格考试公告栏目提供全国中小学和幼儿园教师资格考试最新公告,全国教师资格现场确认安排,全国教师资格考试成绩查询,全国教..
                            </div>
                            <div style={{ width: 560, height: 2, backgroundColor: '#bdbdbd', marginTop: 16 }}></div>
                        </div>
                    </div>
                </div>
            </div>
            <div className='footer'>
                Copyright © 2021  成都蜗牛创想科技有限公司
            </div>
            {/* 公告弹窗模态框 */}
            <Modal title="蜗牛创想7周年 | 探寻职业教育的本质" open={isModalOpen} footer={null} width={600} height={550} onOk={handleOk} onCancel={handleCancel} maskClosable={false}>
                <p>今天这篇文章为蜗牛创想CEO邓强老师对内的全员邮件，在公司成立7周年这个特殊的日子，邓老师向大家分享了蜗牛创想近年来在探寻职业教育本质上的一些思考和体会。</p>

                <p>各位同事，大家好！</p>
                <p>今天，是蜗牛创想成立7周年的日子，作为一名讲师很想跟大家谈一谈关于职业教育这个话题，分享一些我个人的思考。我是一名具备13年教学经验的讲师，现在同样在给学生上课。
                    2009年以来，我从未离开讲台半步，我热爱这份事业，热爱这三尺讲台，它不仅带给了我成就与荣耀，也让我收获了金钱与事业。“桃李满天下，雨露润春华”，相信每一个师者，一定也可以收获桃李满天下的成就与荣耀。</p>
                <p>公司旗下蜗牛学苑作为一家IT教育机构，我们究竟应该培养什么样的学生？我们究竟应该怎样去培养学生？另外一个层面，作为蜗牛学苑占据着半数人员规模最大的教学团队，
                    我们究竟需要什么样的老师？怎样才算是一名好老师？这四个问题，我相信是任何一家教培机构或者各类学校都想要明白的问题，但是往往该问题又很难回答清楚。</p>
                <p>不瞒大家讲，其实我一直对当今中国的教育现状有些意见，尤其是大学教育，存在的问题很多，这方面的情况我就不细聊了，我们也改变不了，但这并不妨碍我爱国。正是基于我对当前大学教育的认识，
                    蜗牛创想一直想自己办一所大学。但是这也是一桩大买卖，而且受到的约束太多，只要体制不改变，也许我们去办一所大学也最终会变成我们自己最讨厌的样子，这些今天咱们都不去谈了。换个角度去想，
                    大学教育要不出问题，也许就没有我们这类职业教育生存的空间了，某个方面来说，我们得感谢大学。今天咱们就深层次的聊聊蜗牛学苑这些年，在IT职业教育这个领域的一些思考和经验。</p>
                <p>首先，让我们一起来思考两个问题。</p>
                <p>问题一：大学教育，三年或者四年，花费至少接近10万？都没能让你学会一门手艺，那为什么职业培训短短几个月的时间（以IT行业为例，学费大概2万左右），就能让你学会一门手艺呢？</p>
                <p>问题二：为什么一名大学生，花费了10万块钱，连工作都找不到，但是却没有学生投诉这所大学，它不给我安排工作。但是，一名培训机构的学生，花费了2万块钱的学费（加上生活费住宿费什么的应该也不会超过3万），培训结束后找不到工作，就要控诉这家培训机构呢？</p>
            </Modal>

            {/* 排行榜模态框 */}
            <Modal title="排行榜" open={isModalOpenRank} footer={null} onOk={handleOkRank} onCancel={handleCancelRank} maskClosable={false}>
                <div className='m0' style={{ width: 360 }}>
                    <div className='paihangbang' >
                        <span>排序</span>
                        <span>考试</span>
                        <span>成绩</span>
                    </div>
                    <div className='paihangbang' style={{flexDirection:'column'}}>
                    {
                            rank.map((item,index) =>{
                                return <div key={item._id} style={{width:'100%',display:'flex',justifyContent:'space-between'}}>
                                    <span>{index+1}</span>
                                    <span>{item.title}</span>
                                    <span>{item.durations}</span>
                                </div>
                            })
                        }
                    </div>
                </div>

            </Modal>

            {/* 个人信息模态框 */}
            <Modal title="修改资料" open={isModalOpenProfile} onOk={handleOkProfile} onCancel={handleCancelProfile} maskClosable={false} footer={null}>
                <div style={{ display: 'flex' }}>
                    <div style={{ marginRight: 20, textAlign: 'center' }}>
                        <img src={User2} alt="" style={{ width: 110, height: 110, borderRadius: '50%' }} />
                        <div style={{ fontSize: 20, color: '#333333', marginTop: 15, marginBottom: 15 }}>李四</div>
                        <div style={{ fontSize: 12, color: '#666666' }}>点击图片修改头像</div>
                    </div>
                    <div>
                        <Form
                            form={form}
                            labelCol={{
                                span: 8,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="手机号"
                                name="phone"
                            >
                                <Input disabled />
                            </Form.Item>

                            <Form.Item
                                label="姓名"
                                name="name"
                                rules={[
                                    {
                                        required: true,
                                        message: '由字母和数字构成!',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label='性别'
                                name='gender'
                            >
                                <Radio.Group onChange={onChange} value={value}>
                                    <Radio value={1}>男</Radio>
                                    <Radio value={2}>女</Radio>
                                </Radio.Group>
                            </Form.Item>

                            <Form.Item
                                label='部门'
                                name='dept'
                            >
                                <Select>
                                    <Select.Option value={1}>开发部</Select.Option>
                                    <Select.Option value={2}>开发一部</Select.Option>
                                    <Select.Option value={3}>开发二部</Select.Option>
                                    <Select.Option value={4}>市场部</Select.Option>
                                    <Select.Option value={5}>人事部</Select.Option>
                                    <Select.Option value={6}>测试部</Select.Option>
                                </Select>
                            </Form.Item>

                            <Form.Item
                                wrapperCol={{
                                    offset: 8,
                                    span: 16,
                                }}
                            >
                                <Button onClick={handleCancelProfile}>取消</Button>
                                <Button type="danger" htmlType="submit">
                                    确认
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </Modal>
        </div>
    )
}
